import React, {Component} from 'react';
import PropTypes from 'prop-types';

import {connect} from 'react-redux';
import {
    increaseCounter,
    decreaseCounter,
    increaseCounterIfOdd,
    increaseCounterDelay} from '../../action';

class Counter extends Component {
    render() {
        const {
            counter,
            increaseCounter,
            decreaseCounter,
            increaseCounterIfOdd,
            increaseCounterDelay
        } = this.props;

        return (
            <p>
                Clicked: {counter} times
                {' '}
                <button onClick={increaseCounter}>+</button>
                {' '}
                <button onClick={decreaseCounter}>-</button>
                {' '}
                <button onClick={increaseCounterIfOdd}>Increment if odd</button>
                {' '}
                <button onClick={() => increaseCounterDelay()}>Increment async</button>
            </p>
        );
    }
}

Counter.propTypes = {};

function mapStateToProps(state) {
    return {
        counter: state.counter
    };
}

export default connect(mapStateToProps, {
    increaseCounter,
    decreaseCounter,
    increaseCounterIfOdd,
    increaseCounterDelay
})(Counter);
